import React, { Component } from 'react'

import MyFooter from './MyFooter';

export default class Index extends Component {
    state = {
        allChecked: false
    }
    render() {
        let { list, allPrice, allNum } = this.props;
        let { allChecked } = this.state
        console.log('list', list);
        console.log('allPrice', allPrice);
        console.log('allNum', allNum)
        return (
            <div className="index">
                <header>
                    <h2>商品列表</h2>
                </header>
                <main>
                    {
                        list.map((item, index) => {
                            return <li key={index}>
                                <input type="checkbox" checked={item.checked} onChange={(e) => {
                                    this.setState({
                                        list: list.map((i, j) => {
                                            if (index === j) {
                                                i.checked = e.target.checked
                                            }
                                            return i
                                        }),
                                        allChecked: list.every(item => item.checked)
                                    })
                                }} />
                                <img src={item.img} alt="" />
                                <p>{item.title}</p>
                                <p>
                                    {item.price}
                                </p>
                                <div>
                                    <button onClick={() => {
                                        if (item.num > 0) {
                                            item.num--;
                                        }

                                        this.props.setList(list);
                                    }}>-</button>
                                    {item.num}
                                    <button onClick={() => {
                                        item.num++;
                                        this.props.setList(list);
                                    }}>+</button>
                                </div>


                            </li>
                        })
                    }
                    全选：<input type="checkbox" checked={allChecked} onChange={(e) => {

                        this.setState({
                            allChecked: e.target.checked,
                            list: list.map((item, index) => {
                                item = e.target.checked
                                return item
                            })

                        })
                    }} /> 总价{allPrice}  总数:{allNum}
                </main>
                <MyFooter></MyFooter>
            </div>
        )
    }
}



